<template>
  <!-- 轮播 -->
  <view class="swiper-view">
    <swiper class="swiper-img" circular autoplay @change="handleSwiperChange">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item.cover" mode="aspectFill" @tap="goGoods(item.goodsId, item.categoryId,item._id)" />
      </swiper-item>
    </swiper>
    <!-- 自定义指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in swiperList" :key="index" :class="{ 'select-text': index === currentIndex }"></text>
    </view>
    <!-- 到店和外卖 -->
    <view class="buy-btn">
      <view v-for="(item, index) in orderAction" :key="index" @tap="changeOrderType(item.orderType)">
        <image :src="item.icon" mode="widthFix" />
        <text>{{ item.title }}</text>
      </view>
    </view>
    <!-- 呵呵 -->
    <view class="advertisement">
      <image v-for="(item, index) in adAction" :key="index" :src="item" mode="aspectFill" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import request, { requestUrl } from "@/api/request";
import type { SwiperItem } from "@/types";
import { useStore } from "@/store";
const store = useStore();
const swiperList = ref<SwiperItem[]>();

onLoad(async () => {
  const data = await request<SwiperItem[]>("/getSwiper");
  swiperList.value = data.data;
});
// 轮播滚动下标
const currentIndex = ref(0);
const handleSwiperChange = (event: { detail: { current: number; }; }) => {
  currentIndex.value = event.detail.current;
};
// 到店和外卖选择
const orderAction = ref([
  {
    icon: "/static/daodian.png",
    title: "到店自取",
    orderType: 0,
  },
  {
    icon: "/static/waimai.png",
    title: "外卖",
    orderType: 1,
  },
]);
// 呵呵
const adAction = ref([
  "http://ge.thexxdd.cn/kecheng-chabaidao/banner001.jpg",
  "http://ge.thexxdd.cn/kecheng-chabaidao/banner002.jpg",
]);
const goGoods = async (goodsId: string, categoryId: string,_id:string) => {
  await request(`/monitorRecommendGoods`, {_id, visitTimes: 1 }, "POST")
  store.swiperParams = { goodsId, categoryId };
  // 跳转tabbar页面
  uni.switchTab({ url: `/pages/ordering/index` });
};
const changeOrderType = (deliveryType: number) => {
  store.deliveryType = deliveryType;
  uni.switchTab({ url: `/pages/ordering/index` });
}
</script>

<style>
page {
  background-color: #f1f1f1;
}

.swiper-view {
  height: 800rpx;
  position: relative;
}

.swiper-img,
image {
  height: 800rpx;
  width: 100%;
}

.indicator {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 20rpx;
  left: 35rpx;
}

.indicator text {
  width: 35rpx;
  height: 8rpx;
  background: aqua;
  border-radius: 6rpx;
  margin: 5rpx;
}

.select-text {
  background: chartreuse !important;
}

/* 到店自取，外卖 */
.buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buy-btn view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fefefe;
  border-radius: 30rpx;
  width: 50%;
  height: 260rpx;
  margin: 20rpx;
}

.buy-btn image {
  width: 150rpx;
}

.buy-btn text {
  font-size: 37rpx;
  font-weight: bold;
  padding-top: 10rpx;
}

/* 广告 */
.advertisement {
  margin: 20rpx;
}

.advertisement image {
  width: 100%;
  height: 220rpx;
  border-radius: 10rpx;
  display: block;
  margin: 20rpx 0;
}
</style>
